<template>
     <div id="user" class="app">
        <div class="divHead">
            <div class="divTitle">
                <i class="el-icon-arrow-left" @click="goBack"></i>个人中心
            </div>
            <div class="divUser" @click="dialogUserInfoVisible = true">
                <img src="../assets/images/headPage.png"/>
                <div class="desc">
                    <div class="divName">{{userInfo.name}}<img src="../assets/images/women.png"/></div>
                    <div class="divPhone">{{userInfo.phone}}</div>
                </div>
            </div>
        </div>
        <div class="divContent">
            <div class="divLinks">
                <div class="item" @click="toAddressPage">
                    <img src="../assets/images/locations.png"/>
                    <span>地址管理</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="divSplit"></div>
                <div class="item" @click="toOrderPage">
                    <img src="../assets/images/orders.png"/>
                    <span>历史订单</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div class="divOrders" v-if="order[0]">
                <div class="title">最新订单</div>
                <div class="timeStatus">
                    <span>{{order[0].createTime}}</span>
                    <span>{{getStatus(order[0].status)}}</span>
                    <!-- <span>正在派送</span> -->
                </div>
                <div class="dishList">
                    <div v-for="(item,index) in order[0].orderDetails" :key="index" class="item">
                        <span>{{item.name}}</span>
                        <span>x{{item.number}}</span>
                    </div>
                </div>
                <div class="result">
                    <span>共{{order[0].number}} 件商品,实付</span>
                    <span class="price">￥{{order[0].amount}}</span>
                </div>
                <div class="btn" v-if="order[0].status === 4">
                    <div class="btnAgain" @click="addOrderAgain">再来一单</div>
                </div>
            </div>
            <div class="quitLogin" @click="toPageLogin">
                退出登录
            </div>
        </div>

        <!--个人信息修改弹出框-->

        <el-dialog title="个人信息修改" :visible.sync="dialogUserInfoVisible" width="95%">
            <el-form :model="userInfo">
                <el-form-item label="用户名称">
                    <el-input v-model="userInfo.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="userInfo.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="userInfo.idNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="userInfo.sex" placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUserInfoVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUserInfo()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {base} from '../assets/js/base'
import router from '@/router'
import { updateUserInfo} from '../assets/api/main'
import{orderAgainApi,orderPagingApi} from '../assets/api/order'
import { logoutApi} from '../assets/api/login'
export default {
    name:"user",
    data(){
        return {
            form:{
                phone:'',
                code:''
            },
            userInfo:{},
            msgFlag:false,
            dialogUserInfoVisible:false, //个人信息修改弹框
            order:[{
                orderTime:'',//下单时间
                status:undefined,//订单状态 1已结账，2未结账，3已退单，4已完成，5已取消
                orderDetails:[{
                    name:'',//菜品名称
                    number:undefined,//数量
                }],//明细
                amount:undefined,//实收金额
                sumNum:0,//菜品总数
            }],
        }
    },
    computed:{},
    created(){
        this.userInfo =JSON.parse(sessionStorage.getItem("userInfo"))
        this.initData()
        base(document,window)
    },
    mounted(){},
    methods:{
        updateUserInfo(){
            // 修改个人信息
            updateUserInfo(this.userInfo).then(res=>{
                if(res.data.code == 1){
                    this.userInfo = res.data.data;
                    sessionStorage.setItem("userInfo",JSON.stringify(res.data.data));
                    this.$message.success("个人信息更新完成");
                }
            })
            // 弹框关闭
            this.dialogUserInfoVisible = false
        },
        goBack(){
            history.go(-1)
        },
        toAddressPage(){
            window.requestAnimationFrame(()=>{
               router.push('/address')
            })  
        },
        toOrderPage(){
            window.requestAnimationFrame(()=>{
              router.push('/order')
            }) 
        },
        initData(){
            this.getLatestOrder()
        },
        async getLatestOrder(){
            const params = {
                page:1,
                pageSize:1
            }
            const res = await orderPagingApi(params)
            if(res.data.code === 1){
                this.order = res.data.data.records
                if(this.order && this.order[0].orderDetails){
                    let number = 0
                    this.order[0].orderDetails.forEach(item=>{
                        number += item.number
                    })
                    this.order[0].sumNum = number
                }
            }else{
                this.$notify({ type:'warning', message:res.data.msg});
            }
        },
        getStatus(status){
            let str = ''
            switch(status){
                case 1:
                    str =  '待付款'
                break;
                case 2:
                    str =  '正在派送'
                break;
                case 3:
                    str =  '已派送'
                break;
                case 4:
                    str =  '已完成'
                break;
                case 5:
                    str =  '已取消'
                break;

            }
            return str
        },
        async addOrderAgain(){
            const res = await orderAgainApi({id:this.order[0].id})
            if(res.data.code === 1){
                window.requestAnimationFrame(()=>{
                   router.push('/home')
                }) 
            }else{
                this.$notify({ type:'warning', message:res.data.msg});
            }
        },
        async toPageLogin(){
            const res = await logoutApi()
            if(res.data.code === 1){
                window.requestAnimationFrame(()=>{
                    router.push('/')
                }) 
            }else{
                this.$notify({ type:'warning', message:res.data.msg});
            }                
        }
    }

}
</script>

<style>
@import url(../assets/styles/vant.min.css);
@import url(../assets/styles/index.css);
@import url(../assets/styles/user.css);
</style>